<template>
  <div :ref="drop" :style="style" :class="dropTargetClass">
    <slot></slot> <!-- Allow content (like DraggableItem) to be passed in -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useDrop, type DropTargetMonitor } from 'vue3-dnd'
// Assuming ItemTypes are simple strings for now
// import { ItemTypes } from '@/utils/dndItemTypes'
import type { FilesystemItemMeta } from '@/utils/indexedDBService'
import { useFileManagerStore } from '@/stores/fileManagerStore.ts'
import { ElMessage } from 'element-plus'
// Import ItemTypes constant
import { ItemTypes } from './constants.ts'

const props = defineProps<{ item: FilesystemItemMeta & { type: 'folder' } }>()

// Use the file manager store
const fileManagerStore = useFileManagerStore()

// Correctly destructure useDrop result
const [collectedProps, drop] = useDrop(() => ({
  // Use the imported constant for accept type
  accept: ItemTypes.FILESYSTEM_ITEM,
  drop: async (draggedItem: FilesystemItemMeta) => {
    // Prevent dropping item onto itself or its current parent
    if (draggedItem.uuid === props.item.uuid) {
      console.log("Cannot drop item onto itself.")
      return
    }
    if (draggedItem.parentId === props.item.uuid) {
      console.log("Item is already in this folder.")
      ElMessage.info("项目已在此文件夹中。")
      return
    }

    console.log(`Dropped item ${draggedItem.name} (${draggedItem.uuid}) onto folder ${props.item.name} (${props.item.uuid})`)
    try {
      // Call file manager store action to move the item
      await fileManagerStore.moveItem(
        draggedItem.uuid,
        props.item.uuid, // Target folder UUID
        draggedItem.type === 'folder' // Is the dragged item a folder?
      )
      // Success message handled within store action
    } catch (error) {
      console.error('Error moving item via drop:', error)
      // Error message handled within store action
    }
  },
  // Collect returns a plain object with the needed properties
  collect: (monitor: DropTargetMonitor) => ({
    isOver: !!monitor.isOver(),
    canDrop: !!monitor.canDrop(),
  }),
  // Optional: canDrop logic to disable dropping based on certain conditions
  canDrop: (draggedItem: FilesystemItemMeta) => {
    // Prevent dropping a folder onto itself
    if (draggedItem.uuid === props.item.uuid) {
      return false
    }
    // Prevent dropping folder into itself
    if (draggedItem.type === 'folder' && draggedItem.uuid === props.item.uuid) {
      return false
    }
    return true
  }
}))

// Computed properties access the collected state via .value
const dropTargetClass = computed(() => ({
  'drop-target-folder': true,
  'is-over': collectedProps.value.isOver && collectedProps.value.canDrop,
  'cannot-drop': collectedProps.value.isOver && !collectedProps.value.canDrop
}))

const style = computed(() => ({
  backgroundColor: collectedProps.value.isOver ? 'var(--el-color-primary-light-9)' : 'transparent',
  outline: collectedProps.value.isOver ? '2px dashed var(--el-color-primary)' : 'none',
  outlineOffset: '-2px',
  transition: 'background-color 0.2s ease, outline 0.2s ease',
}))
</script>

<style scoped>
/* Add specific styles for the drop target if needed */
div {
  width: 100%; /* Ensure div takes full width of the list item */
}
/* Example styles for hover state (optional, can be adjusted) */
.is-over {
  /* background-color: var(--el-color-primary-light-9); */ /* Style applied via :style binding */
  /* outline: 2px dashed var(--el-color-primary); */
}
.cannot-drop {
  /* Styles for when dragging over but cannot drop */
  /* E.g., background-color: var(--el-color-danger-light-9); */
  /* outline: 2px dashed var(--el-color-danger); */
  cursor: not-allowed;
}
</style> 